<template>
  <div style="width: 70%; margin-top: 5%">
    <el-form
      :model="user"
      :rules="rules"
      ref="userFormRef"
      label-width="100px"
      class="demo-dynamic"
    >
      <!-- 昵称 -->
      <el-form-item
        style="width: 49%"
        label="昵称"
        prop="name"
      >
        <el-input v-model="user.name"></el-input>
      </el-form-item>

      <br>

      <!-- 性别 -->
      <el-form-item label="性别" prop="gender">
        <el-select v-model="user.gender" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>

      <!-- 年龄 -->
      <el-form-item label="年龄" prop="age">
        <el-select v-model="user.age" placeholder="请选择年龄">
          <el-option
            v-for="age in ageOptions"
            :key="age"
            :label="age"
            :value="age"
          />
        </el-select>
      </el-form-item>

      <!-- 邮箱 -->
      <el-form-item
        style="width: 60%"
        prop="email"
        label="邮箱"
      >
        <el-input v-model="user.email"></el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="user.password"
          type="password"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>

      <!-- 确认密码 -->
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          v-model="user.confirmPassword"
          type="password"
          placeholder="请再次输入密码"
          show-password
        />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="" @click="logout()">返回登录界面</el-button>
        <el-button type="primary" @click="submitForm('userFormRef')">注册账号</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive,getCurrentInstance} from 'vue';
import { useUserStore } from '../plugins/pinia'; 


</script>

<style scoped>
</style>